<template>
  <chart
    id="myChart"
    :noData="noData"
    :chartStyle="chartStyle ? chartStyle : 'height:100%'"
    :option="dataOption"
  />
</template>
<script>
import chart from "./newChart";
import echarts from "echarts";
import _ from "lodash";
export default {
  props: {
    value: {
      type: Array,
      default: () => {
        return [];
      }
    },
    option: {
      type: Object,
      default: () => {
        return {};
      }
    },
    chartStyle: {
      type: String, // 自定义图表宽高
      default: () => {
        return "";
      }
    }
  },
  components: {
    chart
  },
  data() {
    return {
      noData: false,
      dataOption: {}
    };
  },
  watch: {
    value(newValue, oldValue) {
      this.noData = false;
      if (this.value && this.value.length > 0) {
        this.noData = false;
        this.setOption(newValue);
      } else {
        this.$set(this, "noData", true);
        return;
      }
    }
  },
  methods: {
    setExchangeOption(res) {
      var xData = [];
      var unit = "";
      var mySeries = [];
      res.forEach((res, index) => {
        var data = {
          data: [],
          type: "bar",
          name: res.name,
          barWidth: this.option.barWidth || 13,
          barGrap: this.option.barGrap || "13%",
          stack: "总量",
          label: {
            normal: {
              show: false,
              position: "insideRight"
            }
          }
        };
        if (index === 0) {
          res.list.forEach(item => {
            data.data.push(item.value);
            const name = item.xData ? item.xData : item.name;
            xData.push(name);
          });
        } else {
          res.list.forEach(item => {
            data.data.push(item.value);
          });
        }
        mySeries.push(data);
      });
      var option = {
        xAxis: {
          show: false,
          type: "value",
          fontWeight: "bold",
          axisLabel: {
            rotate: 45,
            formatter: function(value, index) {
              return "{value|" + value + "}";
            }
          }
        },
        yAxis: {
          data: xData,
          type: "category",
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            margin: 2,
            formatter: value => this.$utils.formatterAxisLabel(value)
          }
        },
        tooltip: {
          axisPointer: {
            shadowStyle: {
              color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(0,0,0,0)"
                },
                {
                  offset: 1,
                  color: "rgba(0,209,255,0.2)"
                }
              ])
            }
          },
          formatter: params => this.$utils.formatterLine(res, params, unit)
        },
        grid: {
          top: "10%",
          right: "10%",
          left: "20%",
          bottom: "10%"
        },
        series: mySeries
      };
      var allOption = _.merge(option, this.option);
      this.$set(this, "dataOption", allOption);
    },
    setOption(res) {
      if (this.option.exchange) {
        var xData = [];
        var unit = "";
        var mySeries = [];
        res.forEach((res, index) => {
          var data = {
            data: [],
            type: "bar",
            name: res.name,
            barWidth: this.option.barWidth || 13,
            barGrap: this.option.barGrap || "13%",
            stack: "总量",
            label: {
              normal: {
                show: false,
                position: "insideRight"
              }
            }
          };
          if (index === 0) {
            res.list.forEach(item => {
              data.data.push(item.value);
              const name = item.xData ? item.xData : item.name;
              xData.push(name);
            });
          } else {
            res.list.forEach(item => {
              data.data.push(item.value);
            });
          }
          mySeries.push(data);
        });
        var option = {
          xAxis: {
            data: xData,
            axisLabel: {
              rotate: 45,
              formatter: function(value, index) {
                return "{value|" + value + "}";
              }
            }
          },
          yAxis: {
            name: unit,
            nameGap: 30,
            nameTextStyle: {
              color: "#31cee6"
            }
          },
          tooltip: {
            axisPointer: {
              shadowStyle: {
                color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(0,0,0,0)"
                  },
                  {
                    offset: 1,
                    color: "rgba(0,209,255,0.2)"
                  }
                ])
              }
            },
            formatter: params => this.$utils.formatterLine(res, params, unit)
          },
          grid: {
            top: "10%",
            right: "10%",
            left: "20%",
            bottom: "10%"
          },
          series: mySeries
        };
        var allOption = _.merge(option, this.option);
        this.$set(this, "dataOption", allOption);
      } else {
        this.setExchangeOption(res);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
#myChart {
  width: 100%;
  height: 100%;
}
</style>
